<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			body>div{
				width:200px;
				border:4px solid #ccc;
				margin: 0 auto;
				overflow: hidden;
				padding-bottom: 4px;
			}
			div>div{
				width:135px;
				height:37px;
				border: 4px solid #ccc;
				margin:4px 0 0 4px;
				float: left;
				border-radius:4px;
			}
			input{
				width:45px;
				height:45px;
				border-radius:4px;
				border: 4px solid #ccc;
				margin:4px 0 0 4px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			function fn(str){
				if(str=='C'){
					text.innerText = null;
				}else if(str=='='){
					text.innerText =eval(text.innerText);
				}else{
					text.innerText +=str; 
				}
			}
		</script>
	</head>
	<body>
		<div>
			<div id="text"></div>
			<input type="button" value="C" onclick="fn('C')">
			<input type="button" value="7" onclick="fn('7')">
			<input type="button" value="8" onclick="fn('8')">
			<input type="button" value="9" onclick="fn('9')">
			<input type="button" value="/" onclick="fn('/')">
			<input type="button" value="4" onclick="fn('4')">
			<input type="button" value="5" onclick="fn('5')">
			<input type="button" value="6" onclick="fn('6')">
			<input type="button" value="*" onclick="fn('*')">
			<input type="button" value="1" onclick="fn('1')">
			<input type="button" value="2" onclick="fn('2')">
			<input type="button" value="3" onclick="fn('3')">
			<input type="button" value="-" onclick="fn('-')">
			<input type="button" value="0" onclick="fn('0')">
			<input type="button" value="." onclick="fn('.')">
			<input type="button" value="=" onclick="fn('=')">
			<input type="button" value="+" onclick="fn('+')">
		</div>
	</body>
</html>
